import React, {memo, useEffect,useState} from 'react';
import {shallowEqual, useDispatch, useSelector} from 'react-redux'
import { Table, Tag, Space, Divider, Button, Modal, Spin, message, Select, Form, Input, Image} from 'antd';

import { Redirect } from 'react-router';
import { NavLink } from 'react-router-dom';

import payment from "@/assets/images/payment.JPG"
import { updateRentalInfo } from '../../services';
import { paymentCalculate } from '../../utils';
const { Option } = Select;


export default memo(function RentalPayment() {
    //相关自定义状态
    const [isVisable, setIsVisable] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [isReload, setIsReload] = useState(false);
    const [rentalInfo, setRentalInfo] = useState({});

    //表单提交的处理函数
    const onFnish = (values) => {
        // console.log(values);
        setRentalInfo(values);
        if(paymentCalculate(values.rental_duration) === Number(values.payment))
        {
            setIsVisable(true);
        }
        else
        {
            message.error("缴纳金额计算错误，请计算正确缴纳金额！")
        }

        
    }

    //弹窗确认
    const onOk = () => {
        console.log('ok');
        setIsLoading(true);
        // console.log(rentalInfo);
        updateRentalInfo(rentalInfo).then(res => {
            setIsLoading(false);
            setIsVisable(false);
            console.log(res);
            if(res.status == 200)
            {
                message.success("租赁信息上传成功，请耐心等待审核");
                setIsReload(!isReload);
            }else{
                console.log(res);
                message.error("租赁信息上传失败");
            }
        }).catch(err => {
            console.log(err);
            setIsLoading(false);
            setIsVisable(false);
            message.error("租赁信息上传失败");

        })
        form.setFieldsValue({
            room_number:"",
            air_number:"",
            rental_duration:"",
            house_cheif:"",
            house_cheif_number:"",
            payment:""
        })
    }

    //弹窗取消
    const onCancel = () => {
        console.log("cancel");
        setIsVisable(false);
    }
    //页面刷新
    useEffect(() => {
        // console.log(isReload);
    }, [isReload])
    //表单布局
    const layout = {
        labelCol: {
          span: 8,
        },
        wrapperCol: {
          span: 16,
        },
      };
      const tailLayout = {
        wrapperCol: {
          offset: 24,
          span: 16,
        },
      };

    const [form] = Form.useForm();
    
    return (
        <div>
            <Divider orientation="left">空调租赁缴费</Divider>
            <Form
                {...layout}
                form={form}
                name="control-hooks"
                onFinish={onFnish}
                style={{
                    maxWidth: 600,
                }}
                >
                <Form.Item
                    name="room_number"
                    label="宿舍号"
                    rules={[
                    {
                        required: true,
                        message:"必须填写！"
                    },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="air_number"
                    label="空调编号"
                    rules={[
                    {
                        required: true,
                        message:"必须填写！"
                    },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="rental_duration"
                    label="租赁时长"
                    rules={[
                    {
                        required: true,
                        message:"必须填写！"
                    },
                    ]}
                >
                    <Input placeholder='请填写要租赁的学期数，一年=两个学期'/>
                </Form.Item>
                <Form.Item
                    name="house_cheif"
                    label="缴费人"
                    rules={[
                    {
                        required: true,
                        message:"必须填写！"
                    },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="house_cheif_number"
                    label="缴费人联系方式"
                    rules={[
                    {
                        required: true,
                        message:"必须填写！"
                    },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="payment"
                    label="缴费金额"
                    rules={[
                    {
                        required: true,
                        message:"必须填写！"
                    },
                    ]}
                >
                    <Input />
                </Form.Item>
                <div style={{display:'flex', marginLeft:'125px'}}>
                    <div style={{marginRight:'50px'}}>请扫码缴费:</div>
                    <Image src={payment} alt="paymentPicture" width={200}/>
                </div>
                <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit" style={{marginTop: '20px', width:'80px'}}>提交</Button>
                </Form.Item>
                
            </Form>
            <Modal
                title="确认框"
                visible={isVisable}
                onOk={onOk}
                onCancel={onCancel}
                cancelText="取消"
                okText="确定"
            >
                <p>是否已缴纳租金，是否提交租赁申请？</p>
                <Spin spinning={isLoading} />
            </Modal>
        </div>
    )
})